<!DOCTYPE html><html lang="zh-CN" data-theme="light"><head><div id="myscoll"></div><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"><title>Vue3 | 晚夜微雨问海棠のBlog</title><meta name="keywords" content="vue3"><meta name="author" content="晚夜微雨问海棠"><meta name="copyright" content="晚夜微雨问海棠"><meta name="format-detection" content="telephone=no"><meta name="theme-color" content="#ffffff"><meta name="description" content="这是小生对 Vue3 的一些拙见,有不对之处还望评论区留言,以便及时更正  前言 2021 年 8月10 vue3.2 的正式发布，随之而来是其五大新特性：   新的单文件组件特性 Web Components 性能提升 服务端渲染 Effect 作用域 API     &lt; script setup&gt; 新特性 &#96;&#96;&#96;html 是普通的  的语法糖，在运行前会经过一个编译的过程。 123">
<meta property="og:type" content="article">
<meta property="og:title" content="Vue3">
<meta property="og:url" content="http://example.com/posts/3a42db2d.html">
<meta property="og:site_name" content="晚夜微雨问海棠のBlog">
<meta property="og:description" content="这是小生对 Vue3 的一些拙见,有不对之处还望评论区留言,以便及时更正  前言 2021 年 8月10 vue3.2 的正式发布，随之而来是其五大新特性：   新的单文件组件特性 Web Components 性能提升 服务端渲染 Effect 作用域 API     &lt; script setup&gt; 新特性 &#96;&#96;&#96;html 是普通的  的语法糖，在运行前会经过一个编译的过程。 123">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic2.zhimg.com%2Fv2-ba47e867eb25882c5f5b3cfec2615796_r.jpg%3Fsource%3D1940ef5c&refer=http%3A%2F%2Fpic2.zhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1664441668&t=89c3057f49f3000ba72992ea08681c15">
<meta property="article:published_time" content="2022-11-12T03:28:51.691Z">
<meta property="article:modified_time" content="2022-09-09T05:52:11.184Z">
<meta property="article:author" content="晚夜微雨问海棠">
<meta property="article:tag" content="Vue3">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic2.zhimg.com%2Fv2-ba47e867eb25882c5f5b3cfec2615796_r.jpg%3Fsource%3D1940ef5c&refer=http%3A%2F%2Fpic2.zhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1664441668&t=89c3057f49f3000ba72992ea08681c15"><link rel="shortcut icon" href="/img/favicon.png"><link rel="canonical" href="http://example.com/posts/3a42db2d"><link rel="preconnect" href="//cdn.jsdelivr.net"/><link rel="preconnect" href="//fonts.googleapis.com" crossorigin=""/><link rel="preconnect" href="//busuanzi.ibruce.info"/><link rel="manifest" href="/manifest.json"/><meta name="msapplication-TileColor" content="#49b1f5"/><link rel="apple-touch-icon" sizes="180x180" href="/img/siteicon/128.png"/><link rel="icon" type="image/png" sizes="32x32" href="/img/siteicon/32.png"/><link rel="icon" type="image/png" sizes="16x16" href="/img/siteicon/16.png"/><link rel="mask-icon" href="/img/siteicon/128.png" color="#5bbad5"/><link rel="stylesheet" href="/css/index.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css" media="print" onload="this.media='all'"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/node-snackbar/dist/snackbar.min.css" media="print" onload="this.media='all'"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.min.css" media="print" onload="this.media='all'"><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium+Web&amp;display=swap" media="print" onload="this.media='all'"><script>const GLOBAL_CONFIG = { 
  root: '/',
  algolia: undefined,
  localSearch: {"path":"/search.xml","preload":false,"languages":{"hits_empty":"找不到您查询的内容：${query}"}},
  translate: {"defaultEncoding":2,"translateDelay":0,"msgToTraditionalChinese":"繁","msgToSimplifiedChinese":"简"},
  noticeOutdate: undefined,
  highlight: {"plugin":"highlighjs","highlightCopy":true,"highlightLang":true,"highlightHeightLimit":150},
  copy: {
    success: '复制成功',
    error: '复制错误',
    noSupport: '浏览器不支持'
  },
  relativeDate: {
    homepage: true,
    post: true
  },
  runtime: '天',
  date_suffix: {
    just: '刚刚',
    min: '分钟前',
    hour: '小时前',
    day: '天前',
    month: '个月前'
  },
  copyright: {"limitCount":650,"languages":{"author":"作者: 晚夜微雨问海棠","link":"链接: ","source":"来源: 晚夜微雨问海棠のBlog","info":"著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。"}},
  lightbox: 'fancybox',
  Snackbar: {"chs_to_cht":"你已切换为繁体","cht_to_chs":"你已切换为简体","day_to_night":"你已切换为深色模式","night_to_day":"你已切换为浅色模式","bgLight":"#49b1f5","bgDark":"#1f1f1f","position":"top-right"},
  source: {
    justifiedGallery: {
      js: 'https://cdn.jsdelivr.net/npm/flickr-justified-gallery/dist/fjGallery.min.js',
      css: 'https://cdn.jsdelivr.net/npm/flickr-justified-gallery/dist/fjGallery.min.css'
    }
  },
  isPhotoFigcaption: false,
  islazyload: true,
  isAnchor: true
}</script><script id="config-diff">var GLOBAL_CONFIG_SITE = {
  title: 'Vue3',
  isPost: true,
  isHome: false,
  isHighlightShrink: false,
  isToc: true,
  postUpdate: '2022-09-09 13:52:11'
}</script><noscript><style type="text/css">
  #nav {
    opacity: 1
  }
  .justified-gallery img {
    opacity: 1
  }

  #recent-posts time,
  #post-meta time {
    display: inline !important
  }
</style></noscript><script>(win=>{
    win.saveToLocal = {
      set: function setWithExpiry(key, value, ttl) {
        if (ttl === 0) return
        const now = new Date()
        const expiryDay = ttl * 86400000
        const item = {
          value: value,
          expiry: now.getTime() + expiryDay,
        }
        localStorage.setItem(key, JSON.stringify(item))
      },

      get: function getWithExpiry(key) {
        const itemStr = localStorage.getItem(key)

        if (!itemStr) {
          return undefined
        }
        const item = JSON.parse(itemStr)
        const now = new Date()

        if (now.getTime() > item.expiry) {
          localStorage.removeItem(key)
          return undefined
        }
        return item.value
      }
    }
  
    win.getScript = url => new Promise((resolve, reject) => {
      const script = document.createElement('script')
      script.src = url
      script.async = true
      script.onerror = reject
      script.onload = script.onreadystatechange = function() {
        const loadState = this.readyState
        if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
        script.onload = script.onreadystatechange = null
        resolve()
      }
      document.head.appendChild(script)
    })
  
      win.activateDarkMode = function () {
        document.documentElement.setAttribute('data-theme', 'dark')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#0d0d0d')
        }
      }
      win.activateLightMode = function () {
        document.documentElement.setAttribute('data-theme', 'light')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#ffffff')
        }
      }
      const t = saveToLocal.get('theme')
    
          if (t === 'dark') activateDarkMode()
          else if (t === 'light') activateLightMode()
        
      const asideStatus = saveToLocal.get('aside-status')
      if (asideStatus !== undefined) {
        if (asideStatus === 'hide') {
          document.documentElement.classList.add('hide-aside')
        } else {
          document.documentElement.classList.remove('hide-aside')
        }
      }
    
    const detectApple = () => {
      if(/iPad|iPhone|iPod|Macintosh/.test(navigator.userAgent)){
        document.documentElement.classList.add('apple')
      }
    }
    detectApple()
    })(window)</script><link rel="stylesheet" href="/css/custom.css" media="defer" onload="this.media='all'"> <link rel="stylesheet" href="/swiper/swiper.min.css"> <link rel="stylesheet" href="/swiper/swiperstyle.css"> <link rel="stylesheet" href="/css/rightMenu.css"> <link rel="stylesheet" href="/css/constrain.css"><!-- hexo injector head_end start --><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Zfour/Butterfly-card-history/baiduhistory/css/main.css"><link rel="stylesheet" href="https://npm.elemecdn.com/hexo-butterfly-categories-card@1.0.0/lib/categorybar.css"><link rel="stylesheet" href="https://cdn.cbd.int/hexo-butterfly-clock-anzhiyu/lib/clock.min.css" /><link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Zfour/Butterfly-double-row-display@1.00/cardlistpost.min.css"/>
<style>#recent-posts > .recent-post-item >.recent-post-info > .article-meta-wrap > .tags:before {content:"\A";
  white-space: pre;}#recent-posts > .recent-post-item >.recent-post-info > .article-meta-wrap > .tags > .article-meta__separator{display:none}</style>
<link rel="stylesheet" href="https://cdn.cbd.int/anzhiyu-blog@2.0.3/css/runtime/runtime.min.css" media="print" onload="this.media='all'"><link rel="stylesheet" href="https://cdn.cbd.int/hexo-butterfly-swiper-anzhiyu@1.0.4/lib/swiper.min.css" media="print" onload="this.media='all'"><link rel="stylesheet" href="https://cdn.cbd.int/hexo-butterfly-swiper-anzhiyu@1.0.4/lib/swiperstyle.css" media="print" onload="this.media='all'"><link rel="stylesheet" href="https://cdn.cbd.int/hexo-butterfly-wowjs/lib/animate.min.css" media="print" onload="this.media='screen'"><link rel="stylesheet" href="https://cdn.cbd.int/hexo-butterfly-tag-plugins-plus@latest/lib/assets/font-awesome-animation.min.css" media="defer" onload="this.media='all'"><link rel="stylesheet" href="https://cdn.cbd.int/hexo-butterfly-tag-plugins-plus@latest/lib/tag_plugins.css" media="defer" onload="this.media='all'"><script src="https://cdn.cbd.int/hexo-butterfly-tag-plugins-plus@latest/lib/assets/carousel-touch.js"></script><!-- hexo injector head_end end --><meta name="generator" content="Hexo 6.2.0"><link rel="alternate" href="/atom.xml" title="晚夜微雨问海棠のBlog" type="application/atom+xml">
</head><body><div id="loading-box"><div class="loading-left-bg"></div><div class="loading-right-bg"></div><div class="spinner-box"><div class="configure-border-1"><div class="configure-core"></div></div><div class="configure-border-2"><div class="configure-core"></div></div><div class="loading-word">加载中...</div></div></div><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "" data-lazy-src="https://img2.woyaogexing.com/2022/06/28/de1ce3dc65468fd4!400x400.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">97</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">31</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">17</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/bangumis/index.html"><i class="fa-fw fas fa-home"></i><span> 追番</span></a></div><div class="menus_item"><a class="site-page" href="/comments/"><i class="fa-fw fas fa-envelope"></i><span> 留言板</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 归档</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);"><i class="fa-fw fas fa-list"></i><span> 生活馆</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" target="_blank" rel="noopener" href="http://81.69.189.243:8082/"><i class="fa-fw fas fa-music"></i><span> 音乐</span></a></li><li><a class="site-page child" href="/movies/"><i class="fa-fw fas fa-video"></i><span> 电影</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="/link/"><i class="fa-fw fas fa-link"></i><span> 友情链接</span></a></div><div class="menus_item"><a class="site-page" href="/about/"><i class="fa-fw fas fa-heart"></i><span> 关于</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic2.zhimg.com%2Fv2-ba47e867eb25882c5f5b3cfec2615796_r.jpg%3Fsource%3D1940ef5c&amp;refer=http%3A%2F%2Fpic2.zhimg.com&amp;app=2002&amp;size=f9999,10000&amp;q=a80&amp;n=0&amp;g=0n&amp;fmt=auto?sec=1664441668&amp;t=89c3057f49f3000ba72992ea08681c15')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">晚夜微雨问海棠のBlog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/bangumis/index.html"><i class="fa-fw fas fa-home"></i><span> 追番</span></a></div><div class="menus_item"><a class="site-page" href="/comments/"><i class="fa-fw fas fa-envelope"></i><span> 留言板</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 归档</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);"><i class="fa-fw fas fa-list"></i><span> 生活馆</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" target="_blank" rel="noopener" href="http://81.69.189.243:8082/"><i class="fa-fw fas fa-music"></i><span> 音乐</span></a></li><li><a class="site-page child" href="/movies/"><i class="fa-fw fas fa-video"></i><span> 电影</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="/link/"><i class="fa-fw fas fa-link"></i><span> 友情链接</span></a></div><div class="menus_item"><a class="site-page" href="/about/"><i class="fa-fw fas fa-heart"></i><span> 关于</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">Vue3</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2022-11-12T03:28:51.691Z" title="发表于 2022-11-12 11:28:51">2022-11-12</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2022-09-09T05:52:11.184Z" title="更新于 2022-09-09 13:52:11">2022-09-09</time></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">6.1k</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>23分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="Vue3"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><div class="tip warning"><p>这是小生对 Vue3 的一些拙见,有不对之处还望评论区留言,以便及时更正</p>
</div>
<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><ol>
<li><p>2021 年 8月10 vue3.2 的正式发布，随之而来是其五大新特性：</p>
<blockquote>
<ol>
<li>新的单文件组件特性</li>
<li>Web Components</li>
<li>性能提升</li>
<li>服务端渲染</li>
<li>Effect 作用域 API</li>
</ol>
</blockquote>
</li>
</ol>
<h1 id="lt-script-setup-gt-新特性"><a href="#lt-script-setup-gt-新特性" class="headerlink" title="&lt; script setup&gt; 新特性"></a>&lt; script setup&gt; 新特性</h1><ol>
<li><p>```html<br><script setup> 是普通的 <script> 的语法糖，在运行前会经过一个编译的过程。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">2. ```html</span><br><span class="line">    &lt;script setup&gt; 这个糖贯穿始终的三点：</span><br></pre></td></tr></table></figure>
</li>
<li><p><code>&lt;script setup&gt;</code> 语法糖最终编译成了普通的 <code>&lt;script&gt;</code></p>
</li>
<li><p><code>&lt;script setup&gt;</code> 的内容都编译成了组件 <code>setup()</code> 函数的内容</p>
</li>
<li><p>模板内容都编译成了 VNode 结构并在 <code>setup()</code> 函数中导出，并且对模板中的值进行了引用</p>
</li>
</ol>
<h2 id="基本语法"><a href="#基本语法" class="headerlink" title="基本语法"></a>基本语法</h2><ol>
<li><p>要使用这个语法，需要将 <code>setup</code> attribute 添加到 <code>&lt;script&gt;</code> 代码块上：</p>
<blockquote>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">setup</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"><span class="keyword">import</span> &#123;ref&#125; <span class="keyword">from</span> <span class="string">&quot;vue&quot;</span></span></span><br><span class="line"><span class="language-javascript"><span class="keyword">const</span> a = <span class="title function_">ref</span>(<span class="number">1</span>);</span></span><br><span class="line"><span class="language-javascript"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;hello script setup&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>
</blockquote>
</li>
<li><p>里面的代码会被编译成组件 <code>setup()</code> 函数的内容。</p>
</li>
<li><p>```html<br><script setup> 中的代码会在每次组件实例被创建的时候执行。这一点非常的重要，也就是写在 <script setup> 中的代码，</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">## 顶层绑定将自动暴露给模板</span><br><span class="line"></span><br><span class="line">### 基本使用</span><br><span class="line"></span><br><span class="line">1. 当使用 `&lt;script setup&gt;` 的时候，任何在 `&lt;script setup&gt;` 声明的顶层的绑定 (包括声明的变量，函数声明，以及 import 引入的内容) 都能在模板中直接使用，不再需要使用 `return` 导出。</span><br><span class="line"></span><br><span class="line">2. ```html</span><br><span class="line">   &lt;script setup lang=&#x27;ts&#x27;&gt;</span><br><span class="line">   import &#123; ref &#125; from &quot;vue&quot;;</span><br><span class="line"></span><br><span class="line">   const inputValue = ref(&#x27;输入测试&#x27;);</span><br><span class="line">   &lt;/script&gt;</span><br><span class="line"></span><br><span class="line">   &lt;template&gt;</span><br><span class="line">     &lt;input type=&quot;text&quot; :value=&quot;inputValue&quot;/&gt;</span><br><span class="line">   &lt;/template&gt;</span><br><span class="line"></span><br></pre></td></tr></table></figure>
</li>
</ol>
<h3 id="原理探究"><a href="#原理探究" class="headerlink" title="原理探究"></a>原理探究</h3><ol>
<li><p>以下为上述 SFC 编译后的 JS 代码。</p>
</li>
<li><p>可以看到，编译后 <code>&lt;script setup&gt;</code> 语法糖变成了 <code>&lt;script&gt;</code> 并导出了模板 VNode 结构的函数，并且将模板中用到的值进行了引用和自动解包。这就是为什么不再需要显示 <code>return</code> 的原因了</p>
</li>
<li><p>```js<br>import { defineComponent as _defineComponent } from ‘vue’<br>import { createElementVNode as _createElementVNode, unref as _unref, toDisplayString as _toDisplayString, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from “vue”<br>// 这些都是内部的方法，可不用在意<br>const _hoisted_1 = [“value”]</p>
<p>import { ref } from “vue”;<br>import { capitalize } from “./capitalize”;</p>
<p>const <strong>sfc</strong> = /<em>#<strong>PURE</strong></em>/_defineComponent({<br>  setup(__props) {  // 编译成了普通的 script</p>
<pre><code>const inputValue = ref(&#39;输入测试&#39;);
// 可以看到，编译后 `&lt;script setup&gt;` 语法糖变成了&lt;script&gt; 并导出了模板 VNode 结构的函数，并且将模板中用到的值进行了自动解包
return (_ctx,_cache) =&gt; &#123;
  return (_openBlock(), _createElementBlock(_Fragment, null, [
    _createElementVNode(&quot;input&quot;, &#123;
      type: &quot;text&quot;,
      value: inputValue.value   // 自动解包 ref
    &#125;, null, 8 /* PROPS */, _hoisted_1),    // 这里是对动态属性的标记，对 diff 算法的优化
    _createElementVNode(&quot;p&quot;, null, _toDisplayString(_unref(capitalize)(&#39;Hello World!!&#39;)), 1 /* TEXT */)
  ], 64 /* STABLE_FRAGMENT */))
  // 编译后的 setup 导出的模板中自动的就引用了 `capitalize` 函数
&#125;
</code></pre><p>  }<br>})<br><strong>sfc</strong>.<strong>file = “App.vue”<br>export default </strong>sfc__</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">## 组件的使用</span><br><span class="line"></span><br><span class="line">### 自动的组件名推断</span><br><span class="line"></span><br><span class="line">1. 在 vue2.x options API 和使用普通的 `&lt;script&gt;` 的情况下，都可以为组件进行命名，以便再以下三种情况对组件进行定位或使用：</span><br><span class="line"></span><br><span class="line">   &gt; - 开发环境警告格式化</span><br><span class="line">   &gt; - DevTools 检查</span><br><span class="line">   &gt; - 递归的自引用。</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">2. 但是在 `&lt;script setup&gt;` 下，却并没有提供直接的方式来设置的组件的名称，</span><br><span class="line"></span><br><span class="line">3. 因此，vue 在上述情况下会依据它的文件名来自动推断组件名称。</span><br><span class="line"></span><br><span class="line">4. 例如：</span><br><span class="line"></span><br><span class="line">   &gt; 1、名为 `Foo.vue` 的文件可以在模板中用 `&lt;Foo/&gt;` 引用它自己，在 devtools 中看到的组件名称也是 `Foo`。</span><br><span class="line"></span><br><span class="line">5. 注意：</span><br><span class="line"></span><br><span class="line">   &gt; 1、这种推断的方式比显示注册或 `import` 的组件的优先级要低，所以，当遇到注册或引入的组件和推断名称冲突你，可以对注册或引入的组件重命名以避免冲突。</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">6. 在 SFC 中，虽然 `&lt;script setup&gt;` 中无法显示定义组件名称，但是 `&lt;script&gt;` 是支持的，同时在一个 SFC 是支持 `&lt;script setup&gt;` 与 `&lt;script&gt;` 同时存在的</span><br><span class="line"></span><br><span class="line">   &gt; ```js</span><br><span class="line">   &gt; &lt;script lang=&quot;ts&quot;&gt;</span><br><span class="line">   &gt; export default &#123; name: &#x27;CustomComponentsName&#x27; &#125;</span><br><span class="line">   &gt; &lt;/script&gt;</span><br><span class="line">   &gt;</span><br><span class="line">   &gt; &lt;script setup lang=&quot;ts&quot;&gt;</span><br><span class="line">   &gt; // code</span><br><span class="line">   &gt; &lt;/script&gt;</span><br><span class="line">   &gt;</span><br><span class="line">   &gt; &lt;template&gt;</span><br><span class="line">   &gt; 	&lt;p&gt;利用 script 自定义组件名称&lt;/p&gt;</span><br><span class="line">   &gt; &lt;/template&gt;</span><br><span class="line">   &gt;</span><br></pre></td></tr></table></figure>
</li>
<li><p>普通的 <code>&lt;script&gt;</code> 的内容会和 <code>&lt;script setup&gt;</code> 的内容进行 merge，也就自然实现了自定义组件名称。</p>
</li>
</ol>
<h3 id="普通组件的使用"><a href="#普通组件的使用" class="headerlink" title="普通组件的使用"></a>普通组件的使用</h3><ol>
<li><p>```html<br><script setup> 中引入组件后可直接在模板使用，不再需要注册了。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">&gt; ```html</span><br><span class="line">&gt; &lt;script setup lang=&#x27;ts&#x27;&gt;</span><br><span class="line">&gt; import SaySomething from &quot;./Components/SaySomething.vue&quot;;</span><br><span class="line">&gt; &lt;/script&gt;</span><br><span class="line">&gt;</span><br><span class="line">&gt; &lt;template&gt;</span><br><span class="line">&gt;   &lt;SaySomething /&gt;</span><br><span class="line">&gt; &lt;/template&gt;</span><br></pre></td></tr></table></figure>
</li>
<li><p>跟变量和 <code>import</code> 引入的函数一样， <code>&lt;script setup&gt;</code> 将 <code>MyComponent</code> 看做一个变量来引用。如果你使用过 JSX，那这里的心智模型是一样的。</p>
</li>
<li><p>其 kebab-case 格式的 <code>&lt;say-something&gt;</code> 同样能在模板中使用。不过，强烈建议使用 PascalCase 格式作为组件标签名，以便于更好的一致性，同时也有助于区分原生的自定义元素。</p>
</li>
</ol>
<h3 id="动态组件"><a href="#动态组件" class="headerlink" title="动态组件"></a>动态组件</h3><ol>
<li><p>动态组件仍然是使用 <code>is</code>，相对于 vue2.x 没有变化</p>
<blockquote>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">setup</span> <span class="attr">lang</span>=<span class="string">&#x27;ts&#x27;</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"><span class="keyword">import</span> &#123; ref &#125; <span class="keyword">from</span> <span class="string">&quot;vue&quot;</span>;</span></span><br><span class="line"><span class="language-javascript"><span class="keyword">import</span> <span class="title class_">Bar</span> <span class="keyword">from</span> <span class="string">&quot;./Components/Bar.vue&quot;</span>;</span></span><br><span class="line"><span class="language-javascript"><span class="keyword">import</span> <span class="title class_">Foo</span> <span class="keyword">from</span> <span class="string">&quot;./Components/Foo.vue&quot;</span>;</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"><span class="keyword">const</span> condition = <span class="title function_">ref</span>(<span class="literal">false</span>);</span></span><br><span class="line"><span class="language-javascript"><span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> condition.<span class="property">value</span> = <span class="literal">true</span>, <span class="number">2000</span>);</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">template</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">component</span> <span class="attr">:is</span>=<span class="string">&quot;condition ? Bar : Foo&quot;</span>/&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br><span class="line"></span><br></pre></td></tr></table></figure>
</blockquote>
</li>
</ol>
<h3 id="递归组件"><a href="#递归组件" class="headerlink" title="递归组件"></a>递归组件</h3><ol>
<li><p>因为自动组件名推断的缘故，一个单文件组件可以通过它的文件名被其自己所引用。</p>
</li>
<li><p>例如：名为 <code>Foo.vue</code> 的组件可以在其模板中用 <code>&lt;Foo/&gt;</code> 引用它自己。</p>
</li>
<li><p>可以给组件起别名</p>
</li>
<li><p>注意：</p>
<blockquote>
<p>1、这种方式相比于 import 导入的组件和自主注册的组件优先级更低。</p>
<p>2、所有如果有命名的 import 导入和组件的推断名冲突了，可以使用 import 别名导入：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; <span class="title class_">Foo</span> <span class="keyword">as</span> <span class="title class_">FooChild</span> &#125; <span class="keyword">from</span> <span class="string">&#x27;./components&#x27;</span></span><br></pre></td></tr></table></figure>
</blockquote>
</li>
</ol>
<h3 id="命名空间组件"><a href="#命名空间组件" class="headerlink" title="命名空间组件"></a>命名空间组件</h3><ol>
<li><p>可以使用带点的组件标记，</p>
</li>
<li><p>例如 <code>&lt;Foo.Bar&gt;</code> 来引用嵌套在对象属性中的组件。</p>
</li>
<li><p>这在需要从单个文件中导入多个组件的时候非常有用：Components/index.ts` 用于导出组件</p>
<blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> <span class="title class_">Foo</span> <span class="keyword">from</span> <span class="string">&#x27;./Foo.vue&#x27;</span>;</span><br><span class="line"><span class="keyword">import</span> <span class="title class_">Bar</span> <span class="keyword">from</span> <span class="string">&#x27;./Bar.vue&#x27;</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> &#123; <span class="title class_">Foo</span>, <span class="title class_">Bar</span> &#125;;</span><br></pre></td></tr></table></figure>
</blockquote>
</li>
<li><p><code>index.vue</code> 基于命名空间使用组件</p>
<blockquote>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">setup</span> <span class="attr">lang</span>=<span class="string">&#x27;ts&#x27;</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"><span class="keyword">import</span> * <span class="keyword">as</span> <span class="title class_">Form</span> <span class="keyword">from</span> <span class="string">&quot;../Components&quot;</span>;</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">template</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">Form.Foo</span> /&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">Form.Bar</span> /&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br></pre></td></tr></table></figure>
</blockquote>
</li>
</ol>
<h2 id="props-的使用——defineProps"><a href="#props-的使用——defineProps" class="headerlink" title="props 的使用——defineProps"></a>props 的使用——defineProps</h2><h3 id="运行时声明和类型声明"><a href="#运行时声明和类型声明" class="headerlink" title="运行时声明和类型声明"></a>运行时声明和类型声明</h3><ol>
<li><p>先了解两个概念，运行时声明和类型声明。</p>
</li>
<li><p>运行时声明和，不能与类型声明，同时使用</p>
</li>
<li><p>运行时声明（runtime declaration）</p>
<blockquote>
<p>1、顾名思义，运行时的声明，也就是需要在运行中才会生效的一种声明。</p>
<p>2、运行时声明指对于 <code>props</code> 的类型的声明，这种声明方式 IED 是无法检测和给出提示的，只有在运行后才会给出提示，</p>
<p>3、如： 这是 options API 的 <code>props</code> 写法，也就是运行时声明。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">props: &#123;</span><br><span class="line">	height: Number,</span><br><span class="line">	title: String,</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>4、这样的写法 IDE 是无法检测到 props 是否按照类型进行传递，只能运行后才能检测到，因此这种叫运行时声明。</p>
</blockquote>
</li>
<li><p>类型声明（type declaration）</p>
<blockquote>
<p>1、在这里类型声明指基于 ts 的类型检查，对 <code>props</code> 进行类型的约束，</p>
<p>2、因此，要使用类型声明，需要基于 ts，即 <code>&lt;script setup lang=&quot;ts&quot;&gt;</code></p>
</blockquote>
</li>
</ol>
<h3 id="Compiler-Macros-编译时宏命令"><a href="#Compiler-Macros-编译时宏命令" class="headerlink" title="Compiler Macros (编译时宏命令)"></a>Compiler Macros (编译时宏命令)</h3><ol>
<li><p>vue 官网中提到了这样的一个概念 —— Compiler Macros（翻译过来是编译器宏命令、或者编译时宏命令）</p>
</li>
<li><p>维基百科对<a target="_blank" rel="noopener" href="https://zh.wikipedia.org/wiki/巨集">宏</a>的定义如下：</p>
<blockquote>
<p>1、宏是一种批量处理的称谓。</p>
<p>2、计算机科学里的宏是一种抽象，它根据一系列预定义的规则替换一定的文本模式。</p>
<p>3、<a target="_blank" rel="noopener" href="https://zh.wikipedia.org/wiki/解释器">解释器</a>或<a target="_blank" rel="noopener" href="https://zh.wikipedia.org/wiki/编译器">编译器</a>在遇到宏时会自动进行这一模式替换。</p>
<p>4、绝大多数情况下，“宏”这个词的使用时暗示着将小命令或动作转化为一系列指令。</p>
</blockquote>
</li>
</ol>
<ol>
<li>如前所述，<code>&lt;script setup&gt;</code> 其实是普通的 <code>&lt;script&gt;</code> 的语法糖，在运行前会经过一个编译的过程，这个语法糖还提供了一系列的宏命令供开发者使用，在编译的阶段会进行替换。</li>
</ol>
<h3 id="props-的基本用法"><a href="#props-的基本用法" class="headerlink" title="props 的基本用法"></a>props 的基本用法</h3><ol>
<li><p>为了在 <script setup> 中 声明 props ，必须使用 defineProps API，这是一个宏命令，不需要导入，</p>
</li>
<li><p>直接可在 <script setup> 使用且只能在 <script setup> 中使用，</p>
</li>
<li><p>有两种方式可以使用这个宏命令类声明 props，</p>
</li>
<li><p>运行时声明和类型声明式，不同的方式下使用这个宏命令后 props 将具备不同的类型推断。</p>
</li>
<li><p>使用运行时声明（runtime declaration）</p>
<blockquote>
<p>1、<code>defineProps</code> 运行时声明的基本用法如下，仅支持运行时的校验。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">setup</span> <span class="attr">lang</span>=<span class="string">&#x27;ts&#x27;</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"><span class="keyword">const</span> props = <span class="title function_">defineProps</span>(&#123;</span></span><br><span class="line"><span class="language-javascript"><span class="attr">foo</span>: <span class="title class_">String</span>,</span></span><br><span class="line"><span class="language-javascript"><span class="attr">bar</span>: &#123;</span></span><br><span class="line"><span class="language-javascript">  <span class="attr">type</span>: <span class="title class_">Number</span>,</span></span><br><span class="line"><span class="language-javascript">  <span class="attr">required</span>: <span class="literal">true</span></span></span><br><span class="line"><span class="language-javascript">&#125;</span></span><br><span class="line"><span class="language-javascript">&#125;)</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>2、接到的 props 直接可在模板中直接使用，这与 vue2.x 是一致的。编译后的结果如下：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> __sfc__ = <span class="comment">/*#__PURE__*/</span><span class="title function_">_defineComponent</span>(&#123;</span><br><span class="line">  <span class="attr">props</span>: &#123;</span><br><span class="line">    <span class="attr">foo</span>: <span class="title class_">String</span>,</span><br><span class="line">    <span class="attr">bar</span>: &#123; <span class="attr">type</span>: <span class="title class_">Number</span>, <span class="attr">required</span>: <span class="literal">true</span> &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="title function_">setup</span>(<span class="params">__props</span>) &#123;</span><br><span class="line">    <span class="keyword">const</span> props = __props</span><br><span class="line">    <span class="keyword">return</span> <span class="function">() =&gt;</span> &#123;&#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>
</blockquote>
</li>
<li><p>类型声明（type declaration）</p>
<blockquote>
<p>1、<code>defineProps</code> 类型声明的基本用法如下，完美的支持 IDE 的类型推断和检查。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">setup</span> <span class="attr">lang</span>=<span class="string">&#x27;ts&#x27;</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"><span class="keyword">const</span> props = defineProps&lt;&#123;</span></span><br><span class="line"><span class="language-javascript">  foo?: string</span></span><br><span class="line"><span class="language-javascript">  <span class="attr">bar</span>: number</span></span><br><span class="line"><span class="language-javascript">&#125;&gt;()</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>2、编译后的结果如下：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> __sfc__ = <span class="comment">/*#__PURE__*/</span><span class="title function_">_defineComponent</span>(&#123;</span><br><span class="line">  <span class="attr">props</span>: &#123;</span><br><span class="line">    <span class="attr">foo</span>: &#123; <span class="attr">type</span>: <span class="title class_">String</span>, <span class="attr">required</span>: <span class="literal">false</span> &#125;,</span><br><span class="line">    <span class="attr">bar</span>: &#123; <span class="attr">type</span>: <span class="title class_">Number</span>, <span class="attr">required</span>: <span class="literal">true</span> &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="title function_">setup</span>(<span class="params">__props</span>) &#123;</span><br><span class="line">    <span class="keyword">const</span> props = __props</span><br><span class="line">    <span class="keyword">return</span> <span class="function">() =&gt;</span> &#123;&#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;)</span><br><span class="line"></span><br></pre></td></tr></table></figure>
</blockquote>
</li>
<li><p>两种方式最终都编译成了普通的 <code>&lt;script&gt;</code> 下的 <code>props</code> 模式，并且结果几乎完全一致。不同的在于是否完美的支持 IDE 的类型推断和检查。</p>
</li>
</ol>
<h3 id="需要注意的点"><a href="#需要注意的点" class="headerlink" title="需要注意的点"></a>需要注意的点</h3><ol>
<li><p>不能同时使用运行时声明和类型声明</p>
<blockquote>
<p>1、<code>defineProps</code> 只能是要么使用运行时声明，要么使用类型声明。同时使用两种声明方式会导致编译报错</p>
</blockquote>
</li>
<li><p>使用类型声明的时候，静态分析(也就是约束的类型) 会自动生成等效的运行时声明（2.4.3-2 编译后的结果可以看到），以确保正确的运行时行为</p>
<blockquote>
<p>1、截至目前，类型声明参数必须是以下内容之一，以确保正确的静态分析：</p>
<p>2、类型字面量，如 <code>string, number, boolean</code> 等</p>
<p>3、在同一文件中的 <code>interface</code> 或类型字面量的引用</p>
<p>4、说得更通俗一些就是，<code>props</code> 的 <code>ts</code> 接口只能写在本文件中，如下所示</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">setup</span> <span class="attr">lang</span>=<span class="string">&quot;ts&quot;</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"><span class="comment">// 暂不支持引入，因为 setup 语法糖会将 List 编译成一个变量，因此只能在文件内写</span></span></span><br><span class="line"><span class="language-javascript"><span class="comment">// import &#123; List &#125; from &quot;./type&quot;;</span></span></span><br><span class="line"><span class="language-javascript">interface <span class="title class_">List</span> &#123;</span></span><br><span class="line"><span class="language-javascript">  <span class="attr">id</span>: number,</span></span><br><span class="line"><span class="language-javascript">  <span class="attr">content</span>: string,</span></span><br><span class="line"><span class="language-javascript">  <span class="attr">isDone</span>: boolean,</span></span><br><span class="line"><span class="language-javascript">&#125;;</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"><span class="keyword">const</span> props = defineProps&lt;&#123;</span></span><br><span class="line"><span class="language-javascript">  <span class="attr">title</span>: string,</span></span><br><span class="line"><span class="language-javascript">  <span class="attr">list</span>: <span class="title class_">List</span>[],		<span class="comment">// ts 接口</span></span></span><br><span class="line"><span class="language-javascript">&#125;&gt;();</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br></pre></td></tr></table></figure>
<p>5、现在暂时还不支持复杂的类型和从其它文件进行类型导入。理论上来说，将来是可能实现类型导入的。</p>
<p>6、但是，因为 ts 会自动扫描项目中的 types 来自动导入类型，</p>
<p>7、因此可以将 <code>interface</code> 通过 <code>namespace</code> 的方式来实现自动导入，这样就不需要在文件中引入，直接就可以使用了</p>
<p>8、示例如下，</p>
<p>（1）<code>types</code> 文件夹下的 <code>list.ts</code> 文件</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">declare namespace <span class="title class_">List</span> &#123;</span><br><span class="line">  <span class="keyword">export</span> interface <span class="title class_">Basic</span> &#123;</span><br><span class="line">    <span class="attr">id</span>: number,</span><br><span class="line">    <span class="attr">content</span>: string,</span><br><span class="line">    <span class="attr">isDone</span>: boolean,</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 这样是可以支持的</span></span><br><span class="line"><span class="keyword">const</span> props = defineProps&lt;&#123;</span><br><span class="line">  <span class="attr">title</span>: string,</span><br><span class="line">  <span class="attr">list</span>: <span class="title class_">List</span>.<span class="property">Basic</span>[],</span><br><span class="line">&#125;&gt;();</span><br></pre></td></tr></table></figure>
</blockquote>
</li>
<li><p>在开发环境下， IDE 会试着从类型声明来推断对应的运行时声明（这从 2.4.3 编译后的结果就可以看出）。</p>
</li>
<li><p>例如：</p>
<blockquote>
<p>1、这里从 foo: string 类型中推断出 foo: String。</p>
<p>2、但如果类型声明使用的是对导入类型的引用(例如自定义的 interface)，</p>
<p>3、这里的推断结果会是 foo: null (与 any 类型相等)，因为 IDE 没有外部文件的信息。</p>
<p>4、因此，使用导入类型的引用的类型声明运行时是没有校验的，推断成 null 了</p>
<p>5、在生产模式下，IDE 会生成数组格式的声明来减少打包体积 (这里的 props 会被编译成 <code>[&#39;foo&#39;, &#39;bar&#39;]</code>)。</p>
<p>6、生成的代码仍然是有着类型的 ts 代码，它会在后续的流程中被其它工具处理。</p>
</blockquote>
</li>
</ol>
<h3 id="运行时声明和类型声明的比较"><a href="#运行时声明和类型声明的比较" class="headerlink" title="运行时声明和类型声明的比较"></a>运行时声明和类型声明的比较</h3><div class="table-container">
<table>
<thead>
<tr>
<th>类型</th>
<th>优势</th>
<th>劣势</th>
</tr>
</thead>
<tbody>
<tr>
<td>运行时声明</td>
<td>不适用 ts 的情况下，能够对 props 进行一定的、运行时的类型校验</td>
<td>1.运行时校验        2.值能即进行基本类型的校验       3.编码时无任何提示</td>
</tr>
<tr>
<td>类型声明</td>
<td>完美的支持类型的校验，包括 props 的完美类型约束、父组件在传props 时的提示以及子组件在使用 props 的提示</td>
<td>目前 ts 的接口暂时只支持写在文件内、未来应该会实现可从外部导入的、但是目前可通过 ts 自动扫描 types 来解决</td>
</tr>
</tbody>
</table>
</div>
<ol>
<li>因此、强烈推荐使用类型声明的 defineProps</li>
</ol>
<h2 id="props-的默认值-——-widthDefaults"><a href="#props-的默认值-——-widthDefaults" class="headerlink" title="props 的默认值 —— widthDefaults"></a>props 的默认值 —— widthDefaults</h2><ol>
<li><code>defineProps</code> 使用类型声明时的不足之处在于，它没有可以给 props 提供默认值的方式。为了解决这个问题，提供了 <code>withDefaults</code> 宏命令。</li>
</ol>
<h4 id="基本用法"><a href="#基本用法" class="headerlink" title="基本用法"></a>基本用法</h4><ol>
<li><p>```html</p>
<script setup lang="ts">
const props = withDefaults(defineProps<{
  title?: string,
  list?: List.Basic[],
}>(), {
  title: 'Hello withDefaults',
  list: () => [{ id: 3, content: '3', isDone: false }],
});
</script>

<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">2. 上面代码会被编译为等价的运行时 props 的 `default` 选项，如下所示。此外，`withDefaults` 辅助函数提供了对默认值的类型检查，并确保返回的 `props` 的类型删除了已声明默认值的属性的可选标志。</span><br><span class="line"></span><br><span class="line">3. ```js</span><br><span class="line">   const __sfc__ = /*#__PURE__*/_defineComponent(&#123;</span><br><span class="line">     props: &#123;</span><br><span class="line">       title: &#123; type: String, required: false, default: &#x27;Hello withDefaults&#x27; &#125;,</span><br><span class="line">       list: &#123; type: Array, required: false, default: () =&gt; [&#123; id: 3, content: &#x27;3&#x27;, isDone: false &#125;] &#125;</span><br><span class="line">     &#125;,</span><br><span class="line">     setup(__props) &#123;</span><br><span class="line">       const props = __props</span><br><span class="line">       return () =&gt; &#123;&#125;</span><br><span class="line">     &#125;</span><br><span class="line">   &#125;)</span><br><span class="line"></span><br></pre></td></tr></table></figure>
</li>
</ol>
<h4 id="注意点"><a href="#注意点" class="headerlink" title="注意点"></a>注意点</h4><ol>
<li><code>widthDefaults</code> 是为了给 <code>defineProps</code> 使用类型声明时提供添加默认值的的方法，因此，需要注意这仅仅适用于 <code>&lt;script setup lang=&#39;ts&#39;&gt;</code> 且 <code>defineProps</code> 使用类型声明。</li>
</ol>
<h2 id="自定义事件-——-defineEmits"><a href="#自定义事件-——-defineEmits" class="headerlink" title="自定义事件 —— defineEmits"></a>自定义事件 —— defineEmits</h2><ol>
<li><p>在 <code>&lt;script setup&gt;</code> 中 声明 <code>emit</code> ，必须使用 <code>defineEmits</code> API，这也是一个宏命令。同样可采用运行时声明和类型声明式，在类型声明下 <code>emit</code> 将具备完美的类型推断。</p>
</li>
<li><p>运行时声明</p>
<blockquote>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">setup</span> <span class="attr">lang</span>=<span class="string">&quot;ts&quot;</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"><span class="comment">// 这样是没有任何的类型检查的</span></span></span><br><span class="line"><span class="language-javascript"><span class="keyword">const</span> emit = <span class="title function_">defineEmits</span>([<span class="string">&#x27;handleClick&#x27;</span>, <span class="string">&#x27;handleChange&#x27;</span>]);</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"><span class="keyword">const</span> <span class="title function_">handleClick</span> = (<span class="params"></span>) =&gt; <span class="title function_">emit</span>(<span class="string">&#x27;handleClick&#x27;</span>, <span class="title class_">Date</span>.<span class="title function_">now</span>()+<span class="string">&#x27;&#x27;</span>);</span></span><br><span class="line"><span class="language-javascript"><span class="keyword">const</span> <span class="title function_">handleChange</span> = (<span class="params"></span>) =&gt; <span class="title function_">emit</span>(<span class="string">&#x27;handleChange&#x27;</span>, <span class="title class_">Date</span>.<span class="title function_">now</span>());</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br></pre></td></tr></table></figure>
</blockquote>
</li>
<li><p>类型声明式</p>
<blockquote>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">setup</span> <span class="attr">lang</span>=<span class="string">&quot;ts&quot;</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">interface <span class="title class_">Click</span> &#123;</span></span><br><span class="line"><span class="language-javascript">  <span class="attr">id</span>: string,</span></span><br><span class="line"><span class="language-javascript">  <span class="attr">val</span>: number,</span></span><br><span class="line"><span class="language-javascript">&#125;</span></span><br><span class="line"><span class="language-javascript"><span class="comment">// 完美的类型检查</span></span></span><br><span class="line"><span class="language-javascript"><span class="comment">// List.Basic 是基于 ts 自动扫描 types 文件夹以及 delcare namespace 自动导入的</span></span></span><br><span class="line"><span class="language-javascript"><span class="keyword">const</span> emit = defineEmits&lt;&#123;</span></span><br><span class="line"><span class="language-javascript">  (<span class="attr">e</span>: <span class="string">&#x27;handleClickWithTypeDeclaration&#x27;</span>, <span class="attr">data</span>: <span class="title class_">Click</span>): <span class="keyword">void</span>,</span></span><br><span class="line"><span class="language-javascript">  (<span class="attr">e</span>: <span class="string">&#x27;handleChangeWithTypeDeclaration&#x27;</span>, <span class="attr">data</span>: <span class="title class_">List</span>.<span class="property">Basic</span>): <span class="keyword">void</span>,</span></span><br><span class="line"><span class="language-javascript">&#125;&gt;();</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"><span class="keyword">const</span> <span class="title function_">handleClickWithTypeDeclaration</span> = (<span class="params"></span>) =&gt; <span class="title function_">emit</span>(<span class="string">&#x27;handleClickWithTypeDeclaration&#x27;</span>, &#123; <span class="attr">id</span>: <span class="string">&#x27;1&#x27;</span>, <span class="attr">val</span>: <span class="title class_">Date</span>.<span class="title function_">now</span>() &#125;);</span></span><br><span class="line"><span class="language-javascript"><span class="keyword">const</span> <span class="title function_">handleChangeWithTypeDeclaration</span> = (<span class="params"></span>) =&gt; <span class="title function_">emit</span>(<span class="string">&#x27;handleChangeWithTypeDeclaration&#x27;</span>, &#123;</span></span><br><span class="line"><span class="language-javascript">  <span class="attr">id</span>: <span class="number">1</span>,</span></span><br><span class="line"><span class="language-javascript">  <span class="attr">content</span>: <span class="string">&#x27;change&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">  <span class="attr">isDone</span>: <span class="literal">false</span>,</span></span><br><span class="line"><span class="language-javascript">&#125;);</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br></pre></td></tr></table></figure>
</blockquote>
</li>
<li><p>跟 <code>defineProps</code> 一样，运行时声明和类型声明式同样不可同时使用，且类型声明只能用于在 ts 环境下。</p>
</li>
</ol>
<h2 id="显示的暴露-——-defineExpose"><a href="#显示的暴露-——-defineExpose" class="headerlink" title="显示的暴露 —— defineExpose"></a>显示的暴露 —— defineExpose</h2><h3 id="基本使用"><a href="#基本使用" class="headerlink" title="基本使用"></a>基本使用</h3><ol>
<li><p>官方文档指出默认情况下使用 <code>&lt;script setup&gt;</code> 的组件是默认关闭的，也就是说通过模板 ref 或者 <code>$parent</code> 链获取到的组件的实例，并不会暴露任何在 <code>&lt;script setup&gt;</code> 中声明的绑定（变量，函数）。</p>
</li>
<li><p>为了在 <code>&lt;script setup&gt;</code> 组件中明确要暴露出去的属性，那么就需要使用 <code>defineExpose</code> 这个宏命令。</p>
</li>
<li><p>```html</p>
<script setup>
import { ref } from 'vue'

const a = 1
const b = ref(2)

defineExpose({
  a,
  b
})
</script>

<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">4. 当父组件通过模板 ref 的方式获取到当前组件的实例，获取到的实例会像这样 `&#123; a: number, b: number &#125;` (ref 会和在普通实例中一样被自动解包)</span><br><span class="line"></span><br><span class="line">## `useSlots` 和 `useAttrs`</span><br><span class="line"></span><br><span class="line">1. 在 `&lt;script setup&gt;` 使用 `slots` 和 `attrs` 的情况应该是很罕见的，</span><br><span class="line"></span><br><span class="line">2. 因为可以在模板中直接可通过 `$slots` 和 `$attrs` 来访问它们。</span><br><span class="line"></span><br><span class="line">3. 在那些罕见的需要使用它们的场景中，可以分别用 `useSlots` 和 `useAttrs` 两个函数来获取到对应的信息：</span><br><span class="line"></span><br><span class="line">   &gt; ```html</span><br><span class="line">   &gt; &lt;script setup lang=&quot;ts&quot;&gt;</span><br><span class="line">   &gt; import &#123; useSlots, useAttrs &#125; from &quot;vue&quot;;</span><br><span class="line">   &gt;</span><br><span class="line">   &gt; const slot = useSlots();</span><br><span class="line">   &gt; console.log(&#x27;TestUseSlots&#x27;, slot.header &amp;&amp; slot.header());		// 获取到使用插槽的具体信息</span><br><span class="line">   &gt;</span><br><span class="line">   &gt; const attrs = useAttrs();</span><br><span class="line">   &gt; console.log(&#x27;TestUseAttrs&#x27;, attrs);		// 获取到使用组件时传递的 attributes</span><br><span class="line">   &gt; &lt;/script&gt;</span><br><span class="line">   &gt;</span><br><span class="line">   &gt; &lt;template&gt;</span><br><span class="line">   &gt;   &lt;h1&gt; Here is slots test!!&lt;/h1&gt;</span><br><span class="line">   &gt;   &lt;slot name=&quot;header&quot;&gt;&lt;/slot&gt;</span><br><span class="line">   &gt; &lt;/template&gt;</span><br><span class="line">   &gt;</span><br></pre></td></tr></table></figure>
</li>
<li><p><code>useSlots</code> 和 <code>useAttrs</code> 是真实的运行时函数，它会返回与 <code>setupContext.slots</code> 和 <code>setupContext.attrs</code> 等价的值，同样也能在普通的 composition API 中使用。</p>
</li>
</ol>
<h2 id="与普通的-lt-script-gt-一起使用"><a href="#与普通的-lt-script-gt-一起使用" class="headerlink" title="与普通的 &lt; script &gt; 一起使用"></a>与普通的 <code>&lt; script &gt;</code> 一起使用</h2><ol>
<li><p>```html<br><script setup> 可以和普通的 <script> 一起使用。普通的 <script> 在有这些需要的情况下或许会被使用到：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">2. 无法在 `&lt;script setup&gt;` 声明的选项，例如 `inheritAttrs` 或通过插件启用的自定义的选项。</span><br><span class="line"></span><br><span class="line">3. 显示定义组件的名称。</span><br><span class="line"></span><br><span class="line">4. 运行副作用或者创建只需要执行一次的对象。</span><br><span class="line"></span><br><span class="line">5. ```html</span><br><span class="line">   &lt;script&gt;</span><br><span class="line">   // 普通 &lt;script&gt;, 在模块范围下执行(只执行一次)</span><br><span class="line">   runSideEffectOnce()</span><br><span class="line"></span><br><span class="line">   // 声明额外的选项</span><br><span class="line">   export default &#123;</span><br><span class="line">     inheritAttrs: false,</span><br><span class="line">     customOptions: &#123;&#125;</span><br><span class="line">   &#125;</span><br><span class="line">   &lt;/script&gt;</span><br><span class="line"></span><br><span class="line">   &lt;script setup&gt;</span><br><span class="line">   // 在 setup() 作用域中执行 (对每个实例皆如此)</span><br><span class="line">   &lt;/script&gt;</span><br><span class="line"></span><br></pre></td></tr></table></figure>
</li>
<li><p>实验得知，如果同时使用 <code>&lt;script setup&gt;</code> 和 <code>&lt;script&gt;</code> ，</p>
</li>
<li><p>那么将打破 <code>&lt;script setup&gt;</code> 的默认关闭（即外部无法获取组件内部的属性和方法），此时，组件内部的属性和方法都将在外部可获取到，如 <code>ref.xxx</code></p>
</li>
</ol>
<h2 id="顶层-await"><a href="#顶层-await" class="headerlink" title="顶层 await"></a>顶层 <code>await</code></h2><ol>
<li><p><code>await</code> 的使用必须是要在<code>async</code> 语法糖的包裹下，否者将无法执行，为了更简化代码， <code>&lt;script setup&gt;</code> 中可以使用顶层 <code>await</code>。</p>
</li>
<li><p>```html</p>
<script setup>
const post = await fetch(`/api/post/1`).then(r => r.json())
</script>

<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">3. 上述代码编译后的结果如下，可以看到编译后的结果不再是 `setup` 了，</span><br><span class="line"></span><br><span class="line">4. 而是带有 `async` 的 `setup()`， 因此便可以直接在 `&lt;script setup&gt;` 中使用顶层的 `await` 了：</span><br><span class="line"></span><br><span class="line">5. ```js</span><br><span class="line">   const __sfc__ = &#123;</span><br><span class="line">     async setup(__props) &#123;		// 不再是 setup， 而是 async setup</span><br><span class="line"></span><br><span class="line">       let __temp, __restore</span><br><span class="line">       const post = (([__temp,__restore]=_withAsyncContext(()=&gt;(fetch(`/api/post/1`).then(r =&gt; r.json())))),__temp=await __temp,__restore(),__temp)</span><br><span class="line"></span><br><span class="line">       return () =&gt; &#123;&#125;</span><br><span class="line">     &#125;</span><br><span class="line">   &#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>
</li>
<li><p>另外，await 的表达式会自动编译成在 await 之后保留当前组件实例上下文的格式。</p>
</li>
<li><p>注意： async setup() 必须与 Suspense 组合使用，Suspense 目前还是处于实验阶段的特性。</p>
</li>
<li><p>vue 官方提到，在将来的某个发布版本中将开发完成并提供文档 - 如果你现在感兴趣，可以参照 tests 看它是如何工作的。</p>
</li>
</ol>
<h2 id="限制使用src-导入"><a href="#限制使用src-导入" class="headerlink" title="限制使用src 导入"></a>限制使用src 导入</h2><ol>
<li><p>SFC 的三个模块都可以通过 <code>src</code> 的方式进行导入，如下所示：</p>
</li>
<li><p>```html<br><template src="./template.html"></template><br><style src="./style.css"></style></p>
<script src="./script.js"></script>

<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">3. 但是在 `&lt;script setup&gt;`下强烈建议不使用 Src 导入。</span><br><span class="line"></span><br><span class="line">4. 由于模块执行语义的差异，`&lt;script setup&gt;` 中的代码依赖单文件组件的上下文。</span><br><span class="line"></span><br><span class="line">5. 当将其移动到外部的 `.js` 或者 `.ts` 文件中的时候，对于开发者和工具来说都会感到混乱。</span><br><span class="line"></span><br><span class="line">6. 因而 `&lt;script setup&gt;` 不能和 `src` attribute 一起使用。</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"># `&lt; style &gt; v-bind` 新特性</span><br><span class="line"></span><br><span class="line">1. scoped 跟 vue2.x 的设计和使用完全是一样的，因此不再赘述。</span><br><span class="line"></span><br><span class="line">## style module</span><br><span class="line"></span><br><span class="line">1. 唯一新的点是使用 `&lt;script setup&gt;` 时，可以使用 `useCssModule` API 获取到 css module 对象。</span><br><span class="line"></span><br><span class="line">2. ```html</span><br><span class="line">   &lt;script setup lang=&quot;ts&quot;&gt;</span><br><span class="line">   import &#123; useCssModule &#125; from &quot;vue&quot;;</span><br><span class="line">   const css = useCssModule();</span><br><span class="line">   console.log(css);		// &#123; blue: &quot;_blue_13cse_5&quot;, red: &quot;_red_13cse_2&quot;&#125;</span><br><span class="line">   &lt;/script&gt;</span><br><span class="line"></span><br><span class="line">   &lt;style module&gt;</span><br><span class="line">   .red &#123;</span><br><span class="line">     color: red;</span><br><span class="line">   &#125;</span><br><span class="line">   .blue &#123;</span><br><span class="line">     color: blue;</span><br><span class="line">   &#125;</span><br><span class="line">   &lt;/style&gt;</span><br><span class="line"></span><br></pre></td></tr></table></figure>
</li>
</ol>
<h2 id="状态驱动的动态-CSS"><a href="#状态驱动的动态-CSS" class="headerlink" title="状态驱动的动态 CSS"></a>状态驱动的动态 CSS</h2><h3 id="基本使用-1"><a href="#基本使用-1" class="headerlink" title="基本使用"></a>基本使用</h3><ol>
<li><p>单文件组件的 <code>&lt;style&gt;</code> 标签可以通过 <code>v-bind</code> 这一 CSS 函数将 CSS 的值关联到动态的组件状态上，</p>
</li>
<li><p>有了这一特性，可以将大量的动态样式通过状态来驱动了，而不是写动态的 calss 类名或者获取 dom 来动态设置了。</p>
<blockquote>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">setup</span> <span class="attr">lang</span>=<span class="string">&quot;ts&quot;</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"><span class="keyword">import</span> &#123; ref &#125; <span class="keyword">from</span> <span class="string">&quot;vue&quot;</span>;</span></span><br><span class="line"><span class="language-javascript"><span class="keyword">const</span> color = <span class="title function_">ref</span>(<span class="string">&#x27;red&#x27;</span>);</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"><span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> color.<span class="property">value</span> = <span class="string">&#x27;blue&#x27;</span> , <span class="number">2000</span>);</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">template</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">p</span>&gt;</span>hello<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">style</span> <span class="attr">scoped</span>&gt;</span><span class="language-css"></span></span><br><span class="line"><span class="language-css"><span class="selector-tag">p</span> &#123;</span></span><br><span class="line"><span class="language-css">  <span class="attribute">color</span>: <span class="built_in">v-bind</span>(color);</span></span><br><span class="line"><span class="language-css">&#125;</span></span><br><span class="line"><span class="language-css"></span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line"></span><br></pre></td></tr></table></figure>
</blockquote>
</li>
<li><p>实际的值会被编译成 hash 的 CSS 自定义 property，CSS 本身仍然是静态的。</p>
</li>
<li><p>自定义 property 会通过内联样式的方式应用到组件的根元素上，并且在源值变更的时候响应式更新。</p>
</li>
<li><p>上述代码编译后的结果如下，可以看到，编译后的代码会维护一份 hash 值和源值的映射，</p>
</li>
<li><p>hash 值用于 css var 函数获取自定义属性，hash 映射源值并保留响应式：</p>
</li>
<li><p>编译后的 css</p>
<blockquote>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">p</span><span class="selector-attr">[data-v-f13b4d11]</span> &#123;</span><br><span class="line">  <span class="attribute">color</span>: <span class="built_in">var</span>(--f13b4d11-color);		<span class="comment">/* 通过 css 的 var 函数去获取到自定义属性的值 */</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>
</blockquote>
</li>
<li><p>编译后的 js</p>
<blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> __sfc__ = <span class="comment">/*#__PURE__*/</span><span class="title function_">_defineComponent</span>(&#123;</span><br><span class="line">  <span class="title function_">setup</span>(<span class="params">__props</span>) &#123;</span><br><span class="line">    <span class="title function_">_useCssVars</span>(<span class="function"><span class="params">_ctx</span> =&gt;</span> (&#123;</span><br><span class="line">      <span class="string">&quot;f13b4d11-color&quot;</span>: (color.<span class="property">value</span>)		<span class="comment">// 可以看到，编译后的值 和 一个 hash 值映射，并且具备响应式， css 的 var 便可以获取到这个 hash 映射的值</span></span><br><span class="line">    &#125;))</span><br><span class="line"></span><br><span class="line">    <span class="keyword">const</span> color = <span class="title function_">ref</span>(<span class="string">&#x27;red&#x27;</span>);</span><br><span class="line">    <span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> color.<span class="property">value</span> = <span class="string">&#x27;blue&#x27;</span> , <span class="number">2000</span>);</span><br><span class="line"></span><br><span class="line">    <span class="keyword">return</span> <span class="function">(<span class="params">_ctx,_cache</span>) =&gt;</span> &#123;</span><br><span class="line">      <span class="keyword">return</span> (<span class="title function_">_openBlock</span>(), <span class="title function_">_createElementBlock</span>(<span class="string">&quot;p&quot;</span>, <span class="literal">null</span>, <span class="string">&quot;hello&quot;</span>))</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;)</span><br><span class="line"></span><br></pre></td></tr></table></figure>
</blockquote>
</li>
</ol>
<h3 id="小小解析——css-var-函数探究"><a href="#小小解析——css-var-函数探究" class="headerlink" title="小小解析——css var 函数探究"></a>小小解析——css var 函数探究</h3><ol>
<li><p>在 style 中使用 v-bind 来使用状态以达到动态 css 的目的，最终编译的结果是 vue 维护了 一份 hash 值和源值的映射，hash 值用于 css var 函数获取自定义属性，这个通过代码一眼就能够理解，不太理解的就是这个 css var 函数，先给出总结： var 函数能够将参数替换成预先定义的值</p>
</li>
<li><p>什么是var 函数</p>
<blockquote>
<ol>
<li><p><code>var()</code>函数可以代替元素中任何属性中的值的任何部分。<code>var()</code>函数不能作为属性名、选择器或者其他除了属性值之外的值（这样做通常会产生无效的语法或者一个没有关联到变量的值）。</p>
</li>
<li><p>语法</p>
<blockquote>
<p>1、方法的第一个参数是要替换的自定义属性的名称。函数的可选第二个参数用作回退值。如果第一个参数引用的自定义属性无效，则该函数将使用第二个值。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="title function_">var</span>( &lt;custom-property-name&gt; , &lt;declaration-value&gt;? )</span><br></pre></td></tr></table></figure>
<p>2、注意：</p>
<p>（1）自定义属性的回退值允许使用逗号。</p>
<p>（2）例如，</p>
<p>（3）var(—foo, red, blue)<code>将</code>red, blue`同时指定为回退值；即是说任何在第一个逗号之后到函数结尾前的值都会被考虑为回退值</p>
</blockquote>
</li>
<li><p>值</p>
<blockquote>
<p><custom-property-name> 自定义属性名</p>
<p>1、在实际应用中它被定义为以两个破折号开始的任何有效标识符。</p>
<p>2、 自定义属性仅供作者和用户使用; CSS 将永远不会给他们超出这里表达的意义。</p>
<p><declaration-value> 声明值（后备值）</p>
<p>3、回退值被用来在自定义属性值无效的情况下保证函数有值。</p>
<p>4、回退值可以包含任何字符，但是部分有特殊含义的字符除外，</p>
<p>5、例如换行符、不匹配的右括号（如)、<code>]或</code>}）、感叹号以及顶层分号（不被任何非var()的括号包裹的分号，</p>
<p>6、例如var(—bg-color, —bs;color)是不合法的，而var(—bg-color, —value(bs;color))是合法的）。</p>
</blockquote>
</li>
<li><p>示例</p>
<blockquote>
<p>1、在 <code>:root</code> 上定义，然后使用它</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-pseudo">:root</span> &#123;</span><br><span class="line">  <span class="attr">--main-bg-color</span>: pink;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">body</span> &#123;</span><br><span class="line">  <span class="attribute">background-color</span>: <span class="built_in">var</span>(--main-bg-color);</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>
<p>2、当第一个值未定义，回退值生效</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* 后备值 */</span></span><br><span class="line"></span><br><span class="line"><span class="comment">/* 在父元素样式中定义一个值 */</span></span><br><span class="line">.<span class="property">component</span> &#123;</span><br><span class="line">  --text-<span class="attr">color</span>: #<span class="number">080</span>; <span class="comment">/* header-color 并没有被设定 */</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 在 component 的样式中使用它： */</span></span><br><span class="line">.<span class="property">component</span> .<span class="property">text</span> &#123;</span><br><span class="line">  <span class="attr">color</span>: <span class="title function_">var</span>(--text-color, black); <span class="comment">/* 此处 color 正常取值 --text-color */</span></span><br><span class="line">&#125;</span><br><span class="line">.<span class="property">component</span> .<span class="property">header</span> &#123;</span><br><span class="line">  <span class="attr">color</span>: <span class="title function_">var</span>(--header-color, blue); <span class="comment">/* 此处 color 被回退到 blue */</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>
</blockquote>
</li>
</ol>
</blockquote>
</li>
</ol>
<h1 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h1><ol>
<li><code>Volar</code> 也是 3.2 版本推出后的必备插件了</li>
</ol>
</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="http://example.com">晚夜微雨问海棠</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="http://example.com/posts/3a42db2d.html">http://example.com/posts/3a42db2d.html</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="http://example.com" target="_blank">晚夜微雨问海棠のBlog</a>！</span></div></div><div class="tag_share"><div class="post_share"><div class="social-share" data-image="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic2.zhimg.com%2Fv2-ba47e867eb25882c5f5b3cfec2615796_r.jpg%3Fsource%3D1940ef5c&amp;refer=http%3A%2F%2Fpic2.zhimg.com&amp;app=2002&amp;size=f9999,10000&amp;q=a80&amp;n=0&amp;g=0n&amp;fmt=auto?sec=1664441668&amp;t=89c3057f49f3000ba72992ea08681c15" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script></div></div><div class="post-reward"><div class="reward-button"><i class="fas fa-qrcode"></i> 打赏</div><div class="reward-main"><ul class="reward-all"><li class="reward-item"><a href="https://s1.ax1x.com/2022/11/15/zE9P7d.jpg" target="_blank"><img class="post-qr-code-img" src= "" data-lazy-src="https://s1.ax1x.com/2022/11/15/zE9P7d.jpg" alt="微信"/></a><div class="post-qr-code-desc">微信</div></li><li class="reward-item"><a href="https://s1.ax1x.com/2022/11/15/zE9ung.jpg" target="_blank"><img class="post-qr-code-img" src= "" data-lazy-src="https://s1.ax1x.com/2022/11/15/zE9ung.jpg" alt="支付宝"/></a><div class="post-qr-code-desc">支付宝</div></li></ul></div></div><hr/><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i><span> 评论</span></div></div><div class="comment-wrap"><div><div class="vcomment" id="vcomment"></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content is-expand"><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%89%8D%E8%A8%80"><span class="toc-number">1.</span> <span class="toc-text">前言</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#lt-script-setup-gt-%E6%96%B0%E7%89%B9%E6%80%A7"><span class="toc-number">2.</span> <span class="toc-text">&lt; script setup&gt; 新特性</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%B3%A8%E6%84%8F%E7%82%B9"><span class="toc-number">2.0.0.1.</span> <span class="toc-text">注意点</span></a></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%87%AA%E5%AE%9A%E4%B9%89%E4%BA%8B%E4%BB%B6-%E2%80%94%E2%80%94-defineEmits"><span class="toc-number">2.1.</span> <span class="toc-text">自定义事件 —— defineEmits</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%98%BE%E7%A4%BA%E7%9A%84%E6%9A%B4%E9%9C%B2-%E2%80%94%E2%80%94-defineExpose"><span class="toc-number">2.2.</span> <span class="toc-text">显示的暴露 —— defineExpose</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%9F%BA%E6%9C%AC%E4%BD%BF%E7%94%A8"><span class="toc-number">2.2.1.</span> <span class="toc-text">基本使用</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%B8%8E%E6%99%AE%E9%80%9A%E7%9A%84-lt-script-gt-%E4%B8%80%E8%B5%B7%E4%BD%BF%E7%94%A8"><span class="toc-number">2.3.</span> <span class="toc-text">与普通的 &lt; script &gt; 一起使用</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E9%99%90%E5%88%B6%E4%BD%BF%E7%94%A8src-%E5%AF%BC%E5%85%A5"><span class="toc-number">2.4.</span> <span class="toc-text">限制使用src 导入</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%8A%B6%E6%80%81%E9%A9%B1%E5%8A%A8%E7%9A%84%E5%8A%A8%E6%80%81-CSS"><span class="toc-number">2.5.</span> <span class="toc-text">状态驱动的动态 CSS</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%9F%BA%E6%9C%AC%E4%BD%BF%E7%94%A8-1"><span class="toc-number">2.5.1.</span> <span class="toc-text">基本使用</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%B0%8F%E5%B0%8F%E8%A7%A3%E6%9E%90%E2%80%94%E2%80%94css-var-%E5%87%BD%E6%95%B0%E6%8E%A2%E7%A9%B6"><span class="toc-number">2.5.2.</span> <span class="toc-text">小小解析——css var 函数探究</span></a></li></ol></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E6%80%BB%E7%BB%93"><span class="toc-number">3.</span> <span class="toc-text">总结</span></a></li></ol></div></div></div></div></main><footer id="footer" style="background-image: url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic2.zhimg.com%2Fv2-ba47e867eb25882c5f5b3cfec2615796_r.jpg%3Fsource%3D1940ef5c&amp;refer=http%3A%2F%2Fpic2.zhimg.com&amp;app=2002&amp;size=f9999,10000&amp;q=a80&amp;n=0&amp;g=0n&amp;fmt=auto?sec=1664441668&amp;t=89c3057f49f3000ba72992ea08681c15')"><div id="footer-wrap"><div class="copyright">&copy;2022 - 2023 By 晚夜微雨问海棠</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="translateLink" type="button" title="简繁转换">繁</button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><button id="chat_btn" type="button" title="聊天"><i class="fas fa-sms"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div id="rightMenu"><div class="rightMenu-group rightMenu-small"><div class="rightMenu-item" id="menu-backward"><i class="fa-solid fa-arrow-left"></i></div><div class="rightMenu-item" id="menu-forward"><i class="fa-solid fa-arrow-right"></i></div><div class="rightMenu-item" id="menu-refresh"><i class="fa-solid fa-arrow-rotate-right"></i></div><div class="rightMenu-item" id="menu-home"><i class="fa-solid fa-house"></i></div></div><div class="rightMenu-group rightMenu-line rightMenuOther"><a class="rightMenu-item menu-link" href="/archives/"><i class="fa-solid fa-archive"></i><span>文章归档</span></a><a class="rightMenu-item menu-link" href="/categories/"><i class="fa-solid fa-folder-open"></i><span>文章分类</span></a><a class="rightMenu-item menu-link" href="/tags/"><i class="fa-solid fa-tags"></i><span>文章标签</span></a></div><div class="rightMenu-group rightMenu-line rightMenuNormal"><div class="rightMenu-item" id="menu-translate"><i class="fa-solid fa-earth-asia"></i><span>繁简切换</span></div><div class="rightMenu-item" id="menu-darkmode"><i class="fa-solid fa-moon"></i><span>切换模式</span></div></div></div><div id="rightmenu-mask"></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="/js/tw_cn.js"></script><script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.umd.min.js"></script><script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload/dist/lazyload.iife.min.js"></script><script src="https://cdn.jsdelivr.net/npm/node-snackbar/dist/snackbar.min.js"></script><script src="/js/search/local-search.js"></script><script>var preloader = {
  endLoading: () => {
    document.body.style.overflow = 'auto';
    document.getElementById('loading-box').classList.add("loaded")
  },
  initLoading: () => {
    document.body.style.overflow = '';
    document.getElementById('loading-box').classList.remove("loaded")

  }
}
window.addEventListener('load',preloader.endLoading())</script><div class="js-pjax"><script>(() => {
  const $mermaidWrap = document.querySelectorAll('#article-container .mermaid-wrap')
  if ($mermaidWrap.length) {
    window.runMermaid = () => {
      window.loadMermaid = true
      const theme = document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'default'

      Array.from($mermaidWrap).forEach((item, index) => {
        const mermaidSrc = item.firstElementChild
        const mermaidThemeConfig = '%%{init:{ \'theme\':\'' + theme + '\'}}%%\n'
        const mermaidID = 'mermaid-' + index
        const mermaidDefinition = mermaidThemeConfig + mermaidSrc.textContent
        mermaid.mermaidAPI.render(mermaidID, mermaidDefinition, (svgCode) => {
          mermaidSrc.insertAdjacentHTML('afterend', svgCode)
        })
      })
    }

    const loadMermaid = () => {
      window.loadMermaid ? runMermaid() : getScript('https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js').then(runMermaid)
    }

    window.pjax ? loadMermaid() : document.addEventListener('DOMContentLoaded', loadMermaid)
  }
})()</script><script>function loadValine () {
  function initValine () {
    const valine = new Valine(Object.assign({
      el: '#vcomment',
      appId: '',
      appKey: '',
      avatar: 'monsterid',
      serverURLs: '',
      emojiMaps: "",
      path: window.location.pathname,
      visitor: false
    }, null))
  }

  if (typeof Valine === 'function') initValine() 
  else getScript('https://cdn.jsdelivr.net/npm/valine/dist/Valine.min.js').then(initValine)
}

if ('Valine' === 'Valine' || !true) {
  if (true) btf.loadComment(document.getElementById('vcomment'),loadValine)
  else setTimeout(loadValine, 0)
} else {
  function loadOtherComment () {
    loadValine()
  }
}</script></div><div class="aplayer no-destroy" data-id="7625372994" data-server="netease" data-type="playlist" data-fixed="true" data-autoplay="true"> </div> <script defer src="https://npm.elemecdn.com/jquery@latest/dist/jquery.min.js"></script> <script src="/swiper/swiper.min.js"></script> <script src="/swiper/swiperindex.js"></script> <script src="//cdn.bootcss.com/pace/1.0.2/pace.min.js"></script> <script src="/js/title.js"></script> <script defer data-pjax src="/js/cat.js"></script> <script defer data-pjax src="/js/rightMenu.js"></script><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/dist/activate-power-mode.min.js"></script><script>POWERMODE.colorful = true;
POWERMODE.shake = false;
POWERMODE.mobile = false;
document.body.addEventListener('input', POWERMODE);
</script><script id="click-heart" src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/dist/click-heart.min.js" async="async" mobile="false"></script><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/metingjs/dist/Meting.min.js"></script><script src="https://cdn.jsdelivr.net/npm/pjax/pjax.min.js"></script><script>let pjaxSelectors = ["head > title","#config-diff","#body-wrap","#rightside-config-hide","#rightside-config-show","#web_bg",".js-pjax"]

var pjax = new Pjax({
  elements: 'a:not([target="_blank"])',
  selectors: pjaxSelectors,
  cacheBust: false,
  analytics: false,
  scrollRestoration: false
})

document.addEventListener('pjax:send', function () {

  // removeEventListener scroll 
  window.tocScrollFn && window.removeEventListener('scroll', window.tocScrollFn)
  window.scrollCollect && window.removeEventListener('scroll', scrollCollect)

  typeof preloader === 'object' && preloader.initLoading()
  document.getElementById('rightside').style.cssText = "opacity: ''; transform: ''"
  
  if (window.aplayers) {
    for (let i = 0; i < window.aplayers.length; i++) {
      if (!window.aplayers[i].options.fixed) {
        window.aplayers[i].destroy()
      }
    }
  }

  typeof typed === 'object' && typed.destroy()

  //reset readmode
  const $bodyClassList = document.body.classList
  $bodyClassList.contains('read-mode') && $bodyClassList.remove('read-mode')

  typeof disqusjs === 'object' && disqusjs.destroy()
})

document.addEventListener('pjax:complete', function () {
  window.refreshFn()

  document.querySelectorAll('script[data-pjax]').forEach(item => {
    const newScript = document.createElement('script')
    const content = item.text || item.textContent || item.innerHTML || ""
    Array.from(item.attributes).forEach(attr => newScript.setAttribute(attr.name, attr.value))
    newScript.appendChild(document.createTextNode(content))
    item.parentNode.replaceChild(newScript, item)
  })

  GLOBAL_CONFIG.islazyload && window.lazyLoadInstance.update()

  typeof chatBtnFn === 'function' && chatBtnFn()
  typeof panguInit === 'function' && panguInit()

  // google analytics
  typeof gtag === 'function' && gtag('config', '', {'page_path': window.location.pathname});

  // baidu analytics
  typeof _hmt === 'object' && _hmt.push(['_trackPageview',window.location.pathname]);

  typeof loadMeting === 'function' && document.getElementsByClassName('aplayer').length && loadMeting()

  // prismjs
  typeof Prism === 'object' && Prism.highlightAll()

  typeof preloader === 'object' && preloader.endLoading()
})

document.addEventListener('pjax:error', (e) => {
  if (e.request.status === 404) {
    pjax.loadUrl('/404.html')
  }
})</script><script async data-pjax src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script></div><!-- hexo injector body_end start --><script data-pjax>function history_calendar_injector_config(){
                var parent_div_git = document.getElementsByClassName('sticky_layout')[0];
                var item_html = '<div class="card-widget card-history"><div class="card-content"><div class="item-headline"><i class="fas fa-clock fa-spin"></i><span>那年今日</span></div><div id="history-baidu" style="height: 100px;overflow: hidden"><div class="history_swiper-container" id="history-container" style="width: 100%;height: 100%"><div class="swiper-wrapper" id="history_container_wrapper" style="height:20px"></div></div></div></div>';
                console.log('已挂载history_calendar')
                // parent_div_git.innerHTML=item_html+parent_div_git.innerHTML // 无报错，但不影响使用(支持pjax跳转)
                parent_div_git.insertAdjacentHTML("afterbegin",item_html) // 有报错，但不影响使用(支持pjax跳转)
            }if( document.getElementsByClassName('sticky_layout')[0] && (location.pathname ==='/'|| '/' ==='all')){

            history_calendar_injector_config()
        } </script><script data-pjax  src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script><script data-pjax src="https://cdn.jsdelivr.net/gh/Zfour/Butterfly-card-history/baiduhistory/js/main.js"></script><script data-pjax>
    function butterfly_categories_card_injector_config(){
      var parent_div_git = document.getElementById('recent-posts');
      var item_html = '<style>li.categoryBar-list-item{width:24%;}.categoryBar-list{max-height: 190px;overflow:auto;}.categoryBar-list::-webkit-scrollbar{width:0!important}@media screen and (max-width: 650px){.categoryBar-list{max-height: 160px;}}</style><div class="recent-post-item" style="height:auto;width:100%;padding:0px;"><div id="categoryBar"><ul class="categoryBar-list"><li class="categoryBar-list-item" style="background:url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpicnew6.photophoto.cn%2F20120106%2Fhaimianbaobaotupian-10036689_1.jpg&amp;refer=http%3A%2F%2Fpicnew6.photophoto.cn&amp;app=2002&amp;size=f9999,10000&amp;q=a80&amp;n=0&amp;g=0n&amp;fmt=auto?sec=1665648815&amp;t=a3deb15ddd7a38597964c3a05e519bd7);"> <a class="categoryBar-list-link" onclick="pjax.loadUrl(&quot;categories/Asp-Net/&quot;);" href="javascript:void(0);">Asp.Net</a><span class="categoryBar-list-count">1</span><span class="categoryBar-list-descr"></span></li><li class="categoryBar-list-item" style="background:url(https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/common/site-backgound.jpg);"> <a class="categoryBar-list-link" onclick="pjax.loadUrl(&quot;categories/C-系列/&quot;);" href="javascript:void(0);">C#系列</a><span class="categoryBar-list-count">8</span><span class="categoryBar-list-descr"></span></li><li class="categoryBar-list-item" style="background:url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F13012860773%2F1000.jpg&amp;refer=http%3A%2F%2Finews.gtimg.com&amp;app=2002&amp;size=f9999,10000&amp;q=a80&amp;n=0&amp;g=0n&amp;fmt=auto?sec=1665648865&amp;t=1d2f13b52a7e279e8801545f59eda4e7);"> <a class="categoryBar-list-link" onclick="pjax.loadUrl(&quot;categories/Hexo重装记录/&quot;);" href="javascript:void(0);">Hexo重装记录</a><span class="categoryBar-list-count">2</span><span class="categoryBar-list-descr"></span></li><li class="categoryBar-list-item" style="background:url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202011%2F07%2F20201107183300_ac0c5.thumb.1000_0.jpeg&amp;refer=http%3A%2F%2Fc-ssl.duitang.com&amp;app=2002&amp;size=f9999,10000&amp;q=a80&amp;n=0&amp;g=0n&amp;fmt=auto?sec=1665648887&amp;t=3d32c6b12a4cf12e5cec3585b79c1fc3);"> <a class="categoryBar-list-link" onclick="pjax.loadUrl(&quot;categories/EF/&quot;);" href="javascript:void(0);">EF</a><span class="categoryBar-list-count">1</span><span class="categoryBar-list-descr"></span></li><li class="categoryBar-list-item" style="background:url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic%2F25%2Feb%2F1f%2F25eb1fd40b5a740c2b79e33f700806e5.jpg&amp;refer=http%3A%2F%2Fup.enterdesk.com&amp;app=2002&amp;size=f9999,10000&amp;q=a80&amp;n=0&amp;g=0n&amp;fmt=auto?sec=1665648908&amp;t=6425ee3bd166b0f5c5ffa6fb18b6937b);"> <a class="categoryBar-list-link" onclick="pjax.loadUrl(&quot;categories/LOL/&quot;);" href="javascript:void(0);">LOL</a><span class="categoryBar-list-count">1</span><span class="categoryBar-list-descr"></span></li><li class="categoryBar-list-item" style="background:url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Flmg.jj20.com%2Fup%2Fallimg%2Ftx26%2F36080017392073.jpg&amp;refer=http%3A%2F%2Flmg.jj20.com&amp;app=2002&amp;size=f9999,10000&amp;q=a80&amp;n=0&amp;g=0n&amp;fmt=auto?sec=1665650136&amp;t=5cc414d0ee58c9e285218d92f6a95513);"> <a class="categoryBar-list-link" onclick="pjax.loadUrl(&quot;categories/idea/&quot;);" href="javascript:void(0);">idea</a><span class="categoryBar-list-count">1</span><span class="categoryBar-list-descr"></span></li><li class="categoryBar-list-item" style="background:url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fn.sinaimg.cn%2Fsinacn10%2F320%2Fw700h420%2F20180907%2F5116-hitesuz6599636.jpg&amp;refer=http%3A%2F%2Fn.sinaimg.cn&amp;app=2002&amp;size=f9999,10000&amp;q=a80&amp;n=0&amp;g=0n&amp;fmt=auto?sec=1665650004&amp;t=6a304aa9cc7435ec1d148b8f99092bc0);"> <a class="categoryBar-list-link" onclick="pjax.loadUrl(&quot;categories/世界/&quot;);" href="javascript:void(0);">世界</a><span class="categoryBar-list-count">1</span><span class="categoryBar-list-descr"></span></li><li class="categoryBar-list-item" style="background:url(https://s1.ax1x.com/2022/11/15/zAxCi6.jpg);"> <a class="categoryBar-list-link" onclick="pjax.loadUrl(&quot;categories/世界见闻录/&quot;);" href="javascript:void(0);">世界见闻录</a><span class="categoryBar-list-count">8</span><span class="categoryBar-list-descr"></span></li><li class="categoryBar-list-item" style="background:url(https://s1.ax1x.com/2022/11/15/zAxFzD.jpg);"> <a class="categoryBar-list-link" onclick="pjax.loadUrl(&quot;categories/前端体系/&quot;);" href="javascript:void(0);">前端体系</a><span class="categoryBar-list-count">19</span><span class="categoryBar-list-descr"></span></li><li class="categoryBar-list-item" style="background:url(https://s1.ax1x.com/2022/11/15/zAxnot.jpg);"> <a class="categoryBar-list-link" onclick="pjax.loadUrl(&quot;categories/副业/&quot;);" href="javascript:void(0);">副业</a><span class="categoryBar-list-count">1</span><span class="categoryBar-list-descr"></span></li><li class="categoryBar-list-item" style="background:url(https://s1.ax1x.com/2022/11/15/zAxMJf.jpg);"> <a class="categoryBar-list-link" onclick="pjax.loadUrl(&quot;categories/文案/&quot;);" href="javascript:void(0);">文案</a><span class="categoryBar-list-count">6</span><span class="categoryBar-list-descr"></span></li><li class="categoryBar-list-item" style="background:url(https://s1.ax1x.com/2022/11/15/zAxQW8.jpg);"> <a class="categoryBar-list-link" onclick="pjax.loadUrl(&quot;categories/办公日常/&quot;);" href="javascript:void(0);">办公日常</a><span class="categoryBar-list-count">2</span><span class="categoryBar-list-descr"></span></li><li class="categoryBar-list-item" style="background:url(https://s1.ax1x.com/2022/11/15/zAx3Qg.jpg);"> <a class="categoryBar-list-link" onclick="pjax.loadUrl(&quot;categories/朝花夕拾/&quot;);" href="javascript:void(0);">朝花夕拾</a><span class="categoryBar-list-count">12</span><span class="categoryBar-list-descr"></span></li><li class="categoryBar-list-item" style="background:url(https://s1.ax1x.com/2022/11/15/zAxYes.jpg);"> <a class="categoryBar-list-link" onclick="pjax.loadUrl(&quot;categories/前端/&quot;);" href="javascript:void(0);">前端</a><span class="categoryBar-list-count">20</span><span class="categoryBar-list-descr"></span></li><li class="categoryBar-list-item" style="background:url(undefined);"> <a class="categoryBar-list-link" onclick="pjax.loadUrl(&quot;categories/杂七杂八/&quot;);" href="javascript:void(0);">杂七杂八</a><span class="categoryBar-list-count">7</span><span class="categoryBar-list-descr"></span></li><li class="categoryBar-list-item" style="background:url(undefined);"> <a class="categoryBar-list-link" onclick="pjax.loadUrl(&quot;categories/简书/&quot;);" href="javascript:void(0);">简书</a><span class="categoryBar-list-count">5</span><span class="categoryBar-list-descr"></span></li><li class="categoryBar-list-item" style="background:url(undefined);"> <a class="categoryBar-list-link" onclick="pjax.loadUrl(&quot;categories/游戏/&quot;);" href="javascript:void(0);">游戏</a><span class="categoryBar-list-count">1</span><span class="categoryBar-list-descr"></span></li></ul></div></div>';
      console.log('已挂载butterfly_categories_card')
      parent_div_git.insertAdjacentHTML("afterbegin",item_html)
      }
    if( document.getElementById('recent-posts') && (location.pathname ==='/'|| '/' ==='all')){
    butterfly_categories_card_injector_config()
    }
  </script><script data-pjax>
  function butterfly_clock_anzhiyu_injector_config(){
    var parent_div_git = document.getElementsByClassName('sticky_layout')[0];
    var item_html = '<div class="card-widget card-clock"><div class="card-glass"><div class="card-background"><div class="card-content"><div id="hexo_electric_clock"><img class="entered loading" id="card-clock-loading" src= "" data-lazy-src="https://cdn.cbd.int/hexo-butterfly-clock-anzhiyu/lib/loading.gif" style="height: 120px; width: 100%;" data-ll-status="loading"/></div></div></div></div></div>';
    console.log('已挂载butterfly_clock_anzhiyu')
    parent_div_git.insertAdjacentHTML("afterbegin",item_html)
    }
  var elist = 'null'.split(',');
  var cpage = location.pathname;
  var epage = '/';
  var qweather_key = '41ea442da35546559913a6a5d54163b2';
  var gaud_map_key = '6b62fbebf584b9a22a85bfccbf90335e';
  var baidu_ak_key = 'undefined';
  var flag = 0;
  var clock_rectangle = '114.35,34.79';
  var clock_default_rectangle_enable = 'true';

  for (var i=0;i<elist.length;i++){
    if (cpage.includes(elist[i])){
      flag++;
    }
  }

  if ((epage ==='all')&&(flag == 0)){
    butterfly_clock_anzhiyu_injector_config();
  }
  else if (epage === cpage){
    butterfly_clock_anzhiyu_injector_config();
  }
  </script><script src="https://widget.qweather.net/simple/static/js/he-simple-common.js?v=2.0"></script><script data-pjax src="https://cdn.cbd.int/hexo-butterfly-clock-anzhiyu/lib/clock.min.js"></script><script data-pjax>
  function butterfly_footer_beautify_injector_config(){
    var parent_div_git = document.getElementById('footer-wrap');
    var item_html = '<div id="workboard"></div><p id="ghbdages"><a class="github-badge" target="_blank" href="https://hexo.io/" style="margin-inline:5px" data-title="博客框架为Hexo_v5.4.0" title=""><img src= "" data-lazy-src="https://img.shields.io/badge/Frame-Hexo-blue?style=flat&amp;logo=hexo" alt=""/></a><a class="github-badge" target="_blank" href="https://butterfly.js.org/" style="margin-inline:5px" data-title="主题版本Butterfly_v4.2.2" title=""><img src= "" data-lazy-src="https://img.shields.io/badge/Theme-Butterfly-6513df?style=flat&amp;logo=bitdefender" alt=""/></a><a class="github-badge" target="_blank" href="https://www.jsdelivr.com/" style="margin-inline:5px" data-title="本站使用JsDelivr为静态资源提供CDN加速" title=""><img src= "" data-lazy-src="https://img.shields.io/badge/CDN-jsDelivr-orange?style=flat&amp;logo=jsDelivr" alt=""/></a><a class="github-badge" target="_blank" href="http://creativecommons.org/licenses/by-nc-sa/4.0/" style="margin-inline:5px" data-title="本站采用知识共享署名-非商业性使用-相同方式共享4.0国际许可协议进行许可" title=""><img src= "" data-lazy-src="https://img.shields.io/badge/Copyright-BY--NC--SA%204.0-d42328?style=flat&amp;logo=Claris" alt=""/></a></p>';
    console.log('已挂载butterfly_footer_beautify')
    parent_div_git.insertAdjacentHTML("beforeend",item_html)
    }
  var elist = 'null'.split(',');
  var cpage = location.pathname;
  var epage = 'all';
  var flag = 0;

  for (var i=0;i<elist.length;i++){
    if (cpage.includes(elist[i])){
      flag++;
    }
  }

  if ((epage ==='all')&&(flag == 0)){
    butterfly_footer_beautify_injector_config();
  }
  else if (epage === cpage){
    butterfly_footer_beautify_injector_config();
  }
  </script><script async src="/js/runtime/runtime.min.js"></script><script data-pjax>
  function butterfly_swiper_injector_config(){
    var parent_div_git = document.getElementById('recent-posts');
    var item_html = '<div class="recent-post-item swiper_container_card" style="height: auto;width: 100%"><div id="random"><div id="random-banner"><canvas id="peoplecanvas"></canvas></div><a id="random-hover" style="width:100%;height:auto;" href="javascript:toRandomPost()" rel="external nofollow noreferrer" one-link-mark="yes"><i class="fa fa-paper-plane" style="margin-left:10px"></i><div style="margin-left:10px">随便逛逛<i class="fa-solid fa-arrow-right" style="margin-left:10px"></i></div></a></div><div class="blog-slider swiper-container-fade swiper-container-horizontal" id="swiper_container"><div class="blog-slider__wrp swiper-wrapper" style="transition-duration: 0ms;"><div class="blog-slider__item swiper-slide" style="width: 750px; opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;"><a class="blog-slider__img" onclick="pjax.loadUrl(&quot;posts/67fcd28d.html&quot;);" href="javascript:void(0);" alt=""><img width="48" height="48" src= "" data-lazy-src="https://img2.baidu.com/it/u=4087346614,241521689&amp;fm=253&amp;fmt=auto&amp;app=138&amp;f=JPEG?w=500&amp;h=333" alt="" onerror="this.src=https://cdn.cbd.int/akilar-candyassets/image/loading.gif; this.onerror = null;"/></a><div class="blog-slider__content"><span class="blog-slider__code">2022-09-19</span><a class="blog-slider__title" onclick="pjax.loadUrl(&quot;posts/67fcd28d.html&quot;);" href="javascript:void(0);" alt="">学生人到职业人_心态篇</a><div class="blog-slider__text">再怎么看我也不知道怎么描述它的啦！</div><a class="blog-slider__button" onclick="pjax.loadUrl(&quot;posts/67fcd28d.html&quot;);" href="javascript:void(0);" alt="">详情       </a></div></div><div class="blog-slider__item swiper-slide" style="width: 750px; opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;"><a class="blog-slider__img" onclick="pjax.loadUrl(&quot;posts/8a73f76c.html&quot;);" href="javascript:void(0);" alt=""><img width="48" height="48" src= "" data-lazy-src="https://s1.ax1x.com/2022/11/04/xLiBTA.jpg" alt="" onerror="this.src=https://cdn.cbd.int/akilar-candyassets/image/loading.gif; this.onerror = null;"/></a><div class="blog-slider__content"><span class="blog-slider__code">2022-11-04</span><a class="blog-slider__title" onclick="pjax.loadUrl(&quot;posts/8a73f76c.html&quot;);" href="javascript:void(0);" alt="">生活の奇思妙想☞2022</a><div class="blog-slider__text">再怎么看我也不知道怎么描述它的啦！</div><a class="blog-slider__button" onclick="pjax.loadUrl(&quot;posts/8a73f76c.html&quot;);" href="javascript:void(0);" alt="">详情       </a></div></div><div class="blog-slider__item swiper-slide" style="width: 750px; opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;"><a class="blog-slider__img" onclick="pjax.loadUrl(&quot;posts/14e5dae6.html&quot;);" href="javascript:void(0);" alt=""><img width="48" height="48" src= "" data-lazy-src="https://s1.ax1x.com/2022/10/21/xcAQDH.jpg" alt="" onerror="this.src=https://cdn.cbd.int/akilar-candyassets/image/loading.gif; this.onerror = null;"/></a><div class="blog-slider__content"><span class="blog-slider__code">2022-11-12</span><a class="blog-slider__title" onclick="pjax.loadUrl(&quot;posts/14e5dae6.html&quot;);" href="javascript:void(0);" alt="">少年自负凌云笔</a><div class="blog-slider__text">再怎么看我也不知道怎么描述它的啦！</div><a class="blog-slider__button" onclick="pjax.loadUrl(&quot;posts/14e5dae6.html&quot;);" href="javascript:void(0);" alt="">详情       </a></div></div><div class="blog-slider__item swiper-slide" style="width: 750px; opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;"><a class="blog-slider__img" onclick="pjax.loadUrl(&quot;posts/9b7092b7.html&quot;);" href="javascript:void(0);" alt=""><img width="48" height="48" src= "" data-lazy-src="https://s1.ax1x.com/2022/10/11/xNJbF0.jpg" alt="" onerror="this.src=https://cdn.cbd.int/akilar-candyassets/image/loading.gif; this.onerror = null;"/></a><div class="blog-slider__content"><span class="blog-slider__code">2022-09-13</span><a class="blog-slider__title" onclick="pjax.loadUrl(&quot;posts/9b7092b7.html&quot;);" href="javascript:void(0);" alt="">租房有感</a><div class="blog-slider__text">再怎么看我也不知道怎么描述它的啦！</div><a class="blog-slider__button" onclick="pjax.loadUrl(&quot;posts/9b7092b7.html&quot;);" href="javascript:void(0);" alt="">详情       </a></div></div><div class="blog-slider__item swiper-slide" style="width: 750px; opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;"><a class="blog-slider__img" onclick="pjax.loadUrl(&quot;posts/94bbc7d.html&quot;);" href="javascript:void(0);" alt=""><img width="48" height="48" src= "" data-lazy-src="https://s1.ax1x.com/2022/10/11/xNJLWT.jpg" alt="" onerror="this.src=https://cdn.cbd.int/akilar-candyassets/image/loading.gif; this.onerror = null;"/></a><div class="blog-slider__content"><span class="blog-slider__code">2022-09-25</span><a class="blog-slider__title" onclick="pjax.loadUrl(&quot;posts/94bbc7d.html&quot;);" href="javascript:void(0);" alt="">谷歌收藏</a><div class="blog-slider__text">再怎么看我也不知道怎么描述它的啦！</div><a class="blog-slider__button" onclick="pjax.loadUrl(&quot;posts/94bbc7d.html&quot;);" href="javascript:void(0);" alt="">详情       </a></div></div><div class="blog-slider__item swiper-slide" style="width: 750px; opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;"><a class="blog-slider__img" onclick="pjax.loadUrl(&quot;posts/3b350f14.html&quot;);" href="javascript:void(0);" alt=""><img width="48" height="48" src= "" data-lazy-src="https://s1.ax1x.com/2022/10/11/xNJJd1.jpg" alt="" onerror="this.src=https://cdn.cbd.int/akilar-candyassets/image/loading.gif; this.onerror = null;"/></a><div class="blog-slider__content"><span class="blog-slider__code">2022-09-13</span><a class="blog-slider__title" onclick="pjax.loadUrl(&quot;posts/3b350f14.html&quot;);" href="javascript:void(0);" alt="">阳光不燥、微风正好</a><div class="blog-slider__text">再怎么看我也不知道怎么描述它的啦！</div><a class="blog-slider__button" onclick="pjax.loadUrl(&quot;posts/3b350f14.html&quot;);" href="javascript:void(0);" alt="">详情       </a></div></div></div><div class="blog-slider__pagination swiper-pagination-clickable swiper-pagination-bullets"></div></div></div>';
    console.log('已挂载butterfly_swiper')
    parent_div_git.insertAdjacentHTML("afterbegin",item_html)
    }
  var elist = 'undefined'.split(',');
  var cpage = location.pathname;
  var epage = '/';
  var flag = 0;

  for (var i=0;i<elist.length;i++){
    if (cpage.includes(elist[i])){
      flag++;
    }
  }

  if ((epage ==='all')&&(flag == 0)){
    butterfly_swiper_injector_config();
  }
  else if (epage === cpage){
    butterfly_swiper_injector_config();
  }
  </script><script defer src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/js/swiper.min.js"></script><script defer data-pjax src="https://cdn.cbd.int/hexo-butterfly-swiper-anzhiyu@1.0.4/lib/swiper_init.js"></script><script data-pjax src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/gsap/3.9.1/gsap.min.js"></script><script defer src="https://npm.elemecdn.com/hexo-butterfly-swiper-anzhiyu@1.0.4/lib/people.min.js"></script><script async src="/anzhiyu/random.js"></script><div class="js-pjax"><script async="async">var arr = document.getElementsByClassName('recent-post-item');
for(var i = 0;i<arr.length;i++){
    arr[i].classList.add('wow');
    arr[i].classList.add('animate__zoomIn');
    arr[i].setAttribute('data-wow-duration', '1.5s');
    arr[i].setAttribute('data-wow-delay', '200ms');
    arr[i].setAttribute('data-wow-offset', '30');
    arr[i].setAttribute('data-wow-iteration', '1');
  }</script><script async="async">var arr = document.getElementsByClassName('card-widget');
for(var i = 0;i<arr.length;i++){
    arr[i].classList.add('wow');
    arr[i].classList.add('animate__zoomIn');
    arr[i].setAttribute('data-wow-duration', '');
    arr[i].setAttribute('data-wow-delay', '200ms');
    arr[i].setAttribute('data-wow-offset', '');
    arr[i].setAttribute('data-wow-iteration', '');
  }</script><script async="async">var arr = document.getElementsByClassName('flink-list-card');
for(var i = 0;i<arr.length;i++){
    arr[i].classList.add('wow');
    arr[i].classList.add('animate__flipInY');
    arr[i].setAttribute('data-wow-duration', '3s');
    arr[i].setAttribute('data-wow-delay', '');
    arr[i].setAttribute('data-wow-offset', '');
    arr[i].setAttribute('data-wow-iteration', '');
  }</script><script async="async">var arr = document.getElementsByClassName('flink-list-card');
for(var i = 0;i<arr.length;i++){
    arr[i].classList.add('wow');
    arr[i].classList.add('animate__animated');
    arr[i].setAttribute('data-wow-duration', '3s');
    arr[i].setAttribute('data-wow-delay', '');
    arr[i].setAttribute('data-wow-offset', '');
    arr[i].setAttribute('data-wow-iteration', '');
  }</script><script async="async">var arr = document.getElementsByClassName('article-sort-item');
for(var i = 0;i<arr.length;i++){
    arr[i].classList.add('wow');
    arr[i].classList.add('animate__slideInRight');
    arr[i].setAttribute('data-wow-duration', '1.5s');
    arr[i].setAttribute('data-wow-delay', '');
    arr[i].setAttribute('data-wow-offset', '');
    arr[i].setAttribute('data-wow-iteration', '');
  }</script><script async="async">var arr = document.getElementsByClassName('site-card');
for(var i = 0;i<arr.length;i++){
    arr[i].classList.add('wow');
    arr[i].classList.add('animate__flipInY');
    arr[i].setAttribute('data-wow-duration', '3s');
    arr[i].setAttribute('data-wow-delay', '');
    arr[i].setAttribute('data-wow-offset', '');
    arr[i].setAttribute('data-wow-iteration', '');
  }</script><script async="async">var arr = document.getElementsByClassName('site-card');
for(var i = 0;i<arr.length;i++){
    arr[i].classList.add('wow');
    arr[i].classList.add('animate__animated');
    arr[i].setAttribute('data-wow-duration', '3s');
    arr[i].setAttribute('data-wow-delay', '');
    arr[i].setAttribute('data-wow-offset', '');
    arr[i].setAttribute('data-wow-iteration', '');
  }</script></div><script defer src="https://cdn.cbd.int/hexo-butterfly-wowjs/lib/wow.min.js"></script><script defer src="https://cdn.cbd.int/hexo-butterfly-wowjs/lib/wow_init.js"></script><script async src="/js/ali_font.js"></script><!-- hexo injector body_end end --><script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/koharu.model.json"},"display":{"position":"left","width":150,"height":300},"mobile":{"show":false},"log":false,"pluginJsPath":"lib/","pluginModelPath":"assets/","pluginRootPath":"live2dw/"});</script></body></html>